<template>
    <div>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="metas.total"
                :page-size="metas.pageSize"
                :current-page="metas.current"
                 @current-change="changePage"   >
        </el-pagination>
        <el-table
                :data="bookList"
                style="width: 100%">
            <el-table-column
                    prop="BookId"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="BookName"
                    label="商品名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="price1"
                    label="价格">
            </el-table-column>
            <el-table-column
                    prop="KindName"
                    label="分类">
            </el-table-column>

        </el-table>
    </div>
</template>
<script>
    module.exports = {
        data(){
            return {
                bookList: [],
                metas: {
                    total: 0,
                    pageSize: 0,
                    current: 1
                }
            }
        },
        async created(){
            this.loadBook(1)
        },
        methods: {
            async loadBook(page){
                const rsp = await  axios.get("/prods?p=" + page)
                const {status, result ,metas} = rsp.data;
                if(status === 'success'){
                    this.bookList = result;
                    const {total, size, current} = metas;
                    this.metas.current = current;
                    this.metas.pageSize = size;
                    this.metas.total = total;
                }
            },
            changePage(page){
                this.loadBook(page)
            }

        }
    }
</script>